<template>
  <div class="tableComponent">
    <el-table :data="tableData" :default-sort=defaultSort :show-summary=showsummary @sort-change="sortchange" @current-change="handleCurrentChange" @selection-change="handleSelectionChange" border style="width: 100%" stripe>
      <div class="outBox" v-for="(col,colindex) in columnList" :key="(col,colindex)">
        <!-- 序号 -->
        <el-table-column v-if="col.type==='index'" fixed="left" :width=col.width :key=col.prop>
          <template slot="header" slot-scope="scope">
            <el-popover placement="bottom" width="240" v-model="popoverShow">
              <div class="popoverBox">
                <div class="popoverTop">
                  <span class="title">设置列</span>
                  <span class="specilT">（勾选的列会在列表中展示）</span>
                </div>
                <div class="popoverContent">
                  <el-scrollbar style="height:100%;overflow-x:hidden;">
                    <ul class="menuUl">
                      <li class="menuLi" v-for="(menuli,menuIndex) in menuList" :key="(menuli,menuIndex)">
                        <el-checkbox v-model=menuli.checked :disabled=menuli.disabled>{{menuli.label}}</el-checkbox>
                      </li>
                    </ul>
                  </el-scrollbar>
                </div>
                <div class="popoverBottom">
                  <el-button size="mini" @click="popoverConcle">取消</el-button>
                  <el-button type="primary" size="mini" @click="popoverConfirm">确认</el-button>
                </div>
              </div>
              <el-button slot="reference" type="text" icon="el-icon-setting" @click="popoverShowBtn"></el-button>
            </el-popover>
          </template>
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <!-- 单多选 -->
        <el-table-column v-else-if="col.type==='selection'" :type=col.type :width=col.width :key=col.prop>
        </el-table-column>
        <!-- 普通渲染展示 -->
        <el-table-column v-else-if="col.type==='normal'" :sortable=col.sortable :prop=col.prop :label=col.label :width=col.wdith :key=col.prop>
        </el-table-column>
        <!-- 有操作的渲染 -->
        <el-table-column v-else-if="col.type==='operation'" :label=col.label :width=col.wdith :key=col.prop>
          <template slot-scope="scope">
            <el-button v-for="(btnlist,btnindex) in col.buttonList" :key="(btnlist,btnindex)" @click="btnClick(scope.row,btnlist)" type="text" size="small">{{btnlist.label}}</el-button>
          </template>
        </el-table-column>
      </div>
    </el-table>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'tableComponent',
  props: {
    // 表格列设置popover的展示
    popoverShow: Boolean,
    // 表格默认排序
    defaultSort: Object,
    // 合计
    showsummary: Boolean,
    // 表格默认列
    columnList: Array,
    // 表格数据
    tableData: Array,
    // 设置列的可选数据
    menuList: Array
  },
  data () {
    return {
    }
  },
  methods: {
    // 设置列的弹窗展示
    popoverShowBtn () {
      this.$emit('popoverShowBtn')
    },
    // 确认设置列
    popoverConfirm () {
      this.$emit('popoverConfirm')
    },
    // 取消设置列
    popoverConcle () {
      this.$emit('popoverConcle')
    },
    // 表格操作栏按钮事件
    btnClick (list, btnList) {
      this.$emit('btnClick', list, btnList)
    },
    // 表格排序按钮 同element
    sortchange (info) {
      this.$emit('sortchange', info)
    },
    // 表格的行点击事件
    handleCurrentChange (val) {
      this.$emit('handleCurrentChange', val)
    },
    // 表格的多选事件
    handleSelectionChange (val) {
      this.$emit('handleSelectionChange', val)
    }
  }
}
</script>
<style lang="scss" scoped>
.tableComponent {
    width: 100%;
    height: 100%;
}
.popoverBox {
    width: 100%;
    .popoverTop {
        width: 100%;
        height: 38px;
        line-height: 38px;
        border-bottom: 1px solid #eee;
        padding: 0 12px;
        box-sizing: border-box;
        .specilT {
            font-size: 12px;
            color: #333;
        }
    }
    .popoverContent {
        width: 100%;
        height: 240px;
        .menuUl {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            .menuLi {
                width: 100%;
                height: 28px;
                line-height: 28px;
                padding: 0 12px;
                box-sizing: border-box;
            }
            .menuLi:hover {
                background: #eee;
            }
        }
    }
    .popoverBottom {
        width: 100%;
        height: 38px;
        line-height: 38px;
        border-top: 1px solid #eee;
        padding: 0 12px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}
</style>
<style>
.tableComponent .el-popover {
    padding: 0;
}
.el-scrollbar__wrap {
    overflow-x: hidden !important;
}
</style>
